<template>
  <div class="commodity-list-container">
      <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="商品管理" text2="商品列表" :text3="username"/>
        <div class="list-content">
          <h4>商品列表</h4>
           <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="所属分类">
                        <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <el-form-item label="商品图片">
                        <template>
                            <span>{{ props.row.category }}</span>
                            <!-- <img :src="obj.row.img" style="width:50px; height:50px"> -->
                        </template>
                    </el-form-item>
                    <el-form-item label="商品评价">
                        <span>{{ props.row.rating }}</span>
                    </el-form-item>
                    <el-form-item label="商品描述">
                        <span>{{ props.row.goodsDesc }}</span>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <span>{{ props.row.price }}</span>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <span>{{ props.row.ctime }}</span>
                    </el-form-item>
                    <el-form-item label="商品销量">
                        <span>{{ props.row.sellCount }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
                <el-table-column
                label="商品名称"
                prop="name">
                </el-table-column>
                <el-table-column
                label="所属分类"
                prop="category">
                </el-table-column>
                <el-table-column
                label="商品价格"
                prop="price">
                </el-table-column>
                <el-table-column
                label="商品图片"
                prop="img">
                    <template slot-scope="obj">
                        <img :src="obj.row.imgUrl" style="width:70px; height:70px;  border-radius:10px">
                    </template>
                </el-table-column>
                <el-table-column
                label="商品描述"
                prop="goodsDesc"
                width="300px">
                </el-table-column>
                <el-table-column
                label="操作"
                width="200px">
                    <template slot-scope="obj">
                        <el-button type="primary" @click="clickEdit(obj.row)">编辑</el-button>
                        <el-button type="danger" @click="clickDel(obj.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curpage"
            :page-sizes="[5, 8, 10, 15]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

            <el-dialog title="商品列表" :visible.sync="dialogFormVisible">
                <el-form :model="editArr">
                    <el-form-item label="商品名称" :label-width="formLabelWidth">
                        <el-input v-model="editArr.name" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="所属分类" :label-width="formLabelWidth">
                        <el-input v-model="editArr.category" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="商品价格" :label-width="formLabelWidth">
                        <el-input v-model="editArr.price" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="商品图片" :label-width="formLabelWidth">
                        <el-input v-model="editArr.imgUrl" autocomplete="off"></el-input>
                        
                    </el-form-item>
                     <el-form-item label="商品描述" :label-width="formLabelWidth">
                        <el-input v-model="editArr.goodsDesc" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="商品ID" :label-width="formLabelWidth">
                        <el-input v-model="editArr.id" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="clickDetermine" >确 定</el-button>
                </div>
            </el-dialog>
        </div>
  </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {goodsList,goodsDel,goodsEdit} from "@/apis/api"
    import {conversionTime} from "@/utlis/utlis"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"xxx",
            username:"",
            tableData:[],
//             {
//                 category: "(冒菜)套餐自选区"
// ctime: "2020-05-26T03:49:57.000Z"
// goodsDesc: "荤素双人套餐（配米饭两份+饮品两份）\n主要原料：其他"
// id: 113
// imgUrl: "http://127.0.0.1:5000/upload/imgs/goods_img/1590464996752.webp"
// name: "荤素双人套餐（配米饭两份+饮品两份）"
// price: 35.88
// rating: 100
// ratings: "[{\"username\":\"3******c\",\"rateTime\":1469281964000,\"rateType\":0,\"text\":\"很喜欢的粥\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"},{\"username\":\"2******3\",\"rateTime\":1469271264000,\"rateType\":0,\"text\":\"\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"},{\"username\":\"3******b\",\"rateTime\":1469261964000,\"rateType\":1,\"text\":\"\",\"avatar\":\"http://static.galileo.xiaojukeji.com/static/tms/default_header.png\"}]"
// sellCount: 68
//             }

            total:0,
            curpage:1,
            pagesize:5,
            dialogFormVisible: false,
            form: {
            name: '',
            classification:"",
            price:0,
            },
            formLabelWidth: '120px',
            editArr:[],
        }
    },
     created(){
      this.portrait=imgUrl
      this.username=account
      this.commodityList()
    },
    methods:{
         //获取商品列表
        commodityList(){
            goodsList({
                currentPage:this.curpage,
                pageSize:this.pagesize
            })
            .then(res=>{
                // console.log(res.data)
                if(res.status===200){
                    for(let obj of res.data.data){
                        obj.ctime=conversionTime(obj.ctime)
                    }
                    this.tableData=res.data.data
                    this.total=res.data.total
                }
            })
        },

        //当前页数据条数
        handleSizeChange(val){
            // console.log(a,1)
            this.pagesize=val;
            this.commodityList()
        },
        //翻页
        handleCurrentChange(val){
            // console.log(b,2)
            this.curpage=val;
            this.commodityList()
        },
        //删除商品分类
        clickDel(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '小猪猪烤肉提醒您', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
                .then(() => {
                     goodsDel({
                        id:row.id
                    })
                    .then(res=>{
                        console.log(res.data)
                        this.commodityList()
                    })

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
        },
        //编辑商品分类
        clickEdit(row){
            console.log(row)
            this.dialogFormVisible= true;
            this.editArr=JSON.parse(JSON.stringify(row));
        },
        //确定修改
        clickDetermine(){
            this.dialogFormVisible = false;
            goodsEdit({
                name:this.editArr.name,
                category:this.editArr.category,
                price:this.editArr.price,
                imgUrl:this.editArr.imgUrl.slice(this.editArr.imgUrl.lastIndexOf("/")+1),
                goodsDesc:this.editArr.goodsDesc,
                id:this.editArr.id
            })
            .then(res=>{
                console.log(res.data)
                this.commodityList()
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                    });
            })
        }
       
    }
}

</script>

<style lang=less scoped>
    .commodity-list-container{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .list-content{
        flex:1;
        overflow:scroll;
        margin:20px;
        padding:20px;
        background-color:#fff;
      h4{
        padding-bottom:10px;
        border-bottom:1px solid #eee;
      }
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-button {
        width:70px;
    }
    .el-pagination{
        margin-top:15px;
    }
</style>